<template>
  <div>
    <mt-header fixed title="订单确认">
      <router-link to="/" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
      <mt-button icon="more" slot="right"></mt-button>
    </mt-header>
    <div class="Header_F">
      <img class="img_F" src="../assets/ico@1x1.png"/>
      <p>请添加收货地址</p>
      <img src="../assets/ico_next@1x.png"/>
    </div>

    <div class="Selece">
      <img src="../assets/pic@1x.png"/>
    </div>

    <div class="Big">
      <div class="D">
        <img src="../assets/z1.png"/>
        <div>
          <p>Samsonite新秀丽 PASO系 列 纯PC拉链斜纹拉杆箱 112升 （24...</p>
          <p>已选择：太空银</p>
          <p>￥2200</p>
        </div>
      </div>
      <div class="E">
        <p>数量</p>
        <div class="input">
          <img src="../assets/_@1x.png" @click="sub">
          <div>{{isNum}}</div>
          <img src="../assets/+@1x.png" @click="add">
        </div>
      </div>
      <div class="F">
        <p>运费</p>
        <p>包邮</p>
      </div>
      <div class="L">
        <p>共击{{isNum}}件商品</p>
        <p>小计</p>
        <p>￥{{isAllm}}</p>
      </div>
    </div>
    <div class="Big">
      <div class="D">
        <img src="../assets/z1.png"/>
        <div>
          <p>Samsonite新秀丽 PASO系 列 纯PC拉链斜纹拉杆箱 112升 （24...</p>
          <p>已选择：太空银</p>
          <p>￥2200</p>
        </div>
      </div>
      <div class="E">
        <p>数量</p>
        <div class="input">
          <img src="../assets/_@1x.png">
          <div>1</div>
          <img src="../assets/+@1x.png">
        </div>
      </div>
      <div class="F">
        <p>运费</p>
        <p>包邮</p>
      </div>
      <div class="L">
        <p>共击1件商品</p>
        <p>小计</p>
        <p>￥2200</p>
      </div>
    </div>

    <!--微信付款-->
    <div class="wechart">
      <img src="../assets/wechat@1x.png"/>
      <p>微信支付</p>
      <img src="../assets/ico1@1x.png"/>
    </div>
    <div class="gray"></div>

    <!--底部-->
    <div class="f">
      <div class="Footer">
        <p v-on:click="get">实际付款:</p>
        <p class="Allm" v-model="isAllm">￥{{isAllm}}</p>
        <a @click="" href="http://www.yihangyoupin.com/wxPayTest?userId=10021&mallId=1&money=1">确认支付</a>
      </div>
    </div>

  </div>
</template>
<script>
  /* eslint-disable semi,no-trailing-spaces,no-undef,quotes,space-before-function-paren,comma-dangle,indent,keyword-spacing,eqeqeq,block-spacing,space-before-blocks,spaced-comment,spaced-comment,space-in-parens,no-unused-vars,comma-spacing,space-infix-ops,padded-blocks,no-lone-blocks */

  import Vue from 'vue'
  import Mint from 'mint-ui'
  import 'mint-ui/lib/style.css'
  import wx from 'weixin-js-sdk'
  import { wxHttpTool,wx_config, http_getParam, get_shopQrcoe,wx_share,wx_hideAllMenu } from '../components/httpUtil/httpUtil'
  import {msg_10046} from '../message/msg_10046'

  Vue.use(Mint);

  export default {
    name: "Shopping_T",
// eslint-disable-next-line space-before-function-paren
    data() {
      return {
        list: {},
        isNum: 0,
        isShul: 1,
        isHowm: 2200,
        isAllm: 0,
        ret: '',
        data: '',
// eslint-disable-next-line quotes
        registerUrl: "api/qqs.us",
        jsonValue: {
          "c": "10007",
          "p": {
            "userId": JSON.parse(window.localStorage.data).id,
            "token": token()
          }
        },
      }
    },
    created(){
      wxHttpTool.wxAuthor(this, function (varRet, varJson, varThis = this) {
        if (varRet == -1) {
          varThis.alertTip('网络错误');
          varThis.go = function () {
            varThis.showAlert = false;
          }

        }
        // 关注钱应该判断下是否已经关注过了
        msg_10046.send(varThis,msg_10046.entity(),function(varThis,res){
          varThis.wxlist=res.data.p.sign
          wx_config(varThis.wxlist);
          wx_hideAllMenu();
          wx.hideMenuItems({
            //禁用单独分享朋友圈QQ空间等功能
            menuList: ["menuItem:share:timeline","menuItem:share:QZone","menuItem:share:qq"] // 要隐藏的菜单项，所有menu项见附录3
          });
        })


      },this.type)
    },
// eslint-disable-next-line semi
    methods: {
      sub: function () {
        this.isNum--;
        if (this.isNum <= 0) {
          this.isNum = 0;
        }
        this.isShul = this.isNum;
        this.isHowm = this.isNum * 2200;
        this.isAllm = this.isHowm;
      },
      add: function () {
        this.isNum++;
        this.isShul = this.isNum;
        this.isHowm = this.isNum * 2200;
        this.isAllm = this.isHowm;
      },
      True: function() {
      },
      clksy: function(){
// eslint-disable-next-line no-lone-blocks
        {
          this.$http.get('http://192.168.20.109:8080/EarnAlot/wxPayTest' ,{
            params: {
              mallId: 1000,
              money: 99,
              userId: JSON.parse(window.localStorage.data).id
            }}
          ).then((res) => {
// eslint-disable-next-line semi
          })
        }
      },

      get: function() {
        axios.post(this.registerUrl, this.jsonValue, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        })
          .then(function (response) {
            console.log(response);
          })
          .catch(function (error) {
            console.log(error);
          });
      },
    }
  }
</script>

<style>
  .mint-header {
    background: black;
  }

  .Header_F {
    margin-top: 60px;
    width: 100%;
    height: 120px;
    background: #fff6f4;
    overflow: hidden;
    display: flex;
  }

  .img_F {
    width: 35px;
    height: 35px;
    margin-left: 30px;
    margin-top: 40px;
  }

  .Header_F > p {
    font-size: 28px;
    color: #3b3b43;
    line-height: 120px;
    margin-left: 14px;
  }

  .Header_F > img:nth-of-type(2) {
    width: 12px;
    height: 20px;
    margin-top: 48px;
    margin-left: 324px;
  }

  .Selece {
    width: 100%;
    height: 20px;
    background: #F4F4F4;
  }

  .Selece > img {
    width: 100%;
    height: 8px;
  }

  .Big {
    width: 100%;
  }

  .D {
    width: 100%;
    height: 224px;
    border-bottom: 1px solid #F4F4F4;
    display: flex;
  }

  .D > img:nth-of-type(1) {
    width: 146px;
    height: 146px;
    margin-left: 30px;
    margin-top: 33px;
  }

  .D > div:nth-of-type(1) > p:nth-of-type(1) {
    font-size: 28px;
    color: #3b3b43;
    line-height: 40px;
    margin-top: 32px;
    margin-left: 20px;
  }

  .D > div:nth-of-type(1) > p:nth-of-type(2) {
    font-size: 24px;
    color: #a1a1a1;
    margin-top: 10px;
    margin-left: 20px;
  }

  .D > div:nth-of-type(1) > p:nth-of-type(3) {
    font-size: 28px;
    color: #fd4c2e;
    margin-left: 20px;
    margin-top: 12px;
  }

  .E {
    width: 100%;
    height: 112px;
    border-bottom: 1px solid #F4F4F4;
    display: flex;
  }

  .E > p {
    font-size: 28px;
    color: #3B3B43;
    margin-left: 34px;
    line-height: 112px;
  }

  .input img {
    width: 72px;
    height: 60px;
  }

  .input > div:nth-of-type(1) {
    width: 160px;
    height: 58px;
    border: 1px solid #A1A1A1;
    text-align: center;
    line-height: 58px;
  }

  .input {
    display: flex;
    margin-top: 25px;
    margin-left: 225px;
  }

  .F {
    width: 100%;
    height: 92px;
    border-bottom: 1px solid #F4F4F4;
    display: flex;
  }

  .F > p:nth-of-type(1) {
    font-size: 28px;
    color: #3B3B43;
    margin-left: 34px;
    line-height: 112px;
  }

  .F > p:nth-of-type(2) {
    font-size: 28px;
    color: #A1A1A1;
    margin-left: 470px;
    line-height: 112px;
  }

  .L {
    width: 100%;
    height: 92px;
    display: flex;
    line-height: 92px;
    border-bottom: 1px solid #F4F4F4;
  }

  .L > p:nth-of-type(1) {
    margin-left: 270px;
    font-size: 28px;
    color: #3B3B43;
  }

  .L > p:nth-of-type(2) {
    font-size: 28px;
    color: #3B3B43;
    margin-left: 10px;
  }

  .L > p:nth-of-type(3) {
    margin-left:5px;
    color: #000;
    font-size: 28px;
    color: #fd4c2e;
  }

  .gray {
    width: 100%;
    height: 20px;
    background: #F4F4F4;
  }

  .wechart {
    width: 100%;
    height: 96px;
    display: flex;
    position: relative;
  }

  .wechart > img:nth-of-type(1) {
    width: 43px;
    height: 38px;
    margin-left: 38px;
    margin-top: 29px;
  }

  .wechart > p {
    font-size: 28px;
    color: #3B3B43;
    margin-left: 26px;
    line-height: 96px;
  }

  .wechart > img:nth-of-type(2) {
    width: 34px;
    height: 34px;
    margin-left: 357px;
    margin-top: 35px;
  }

  .Footer {
    width: 100%;
    height: 100px;
    display: flex;
    background: #ffffff;
    position: fixed;
    bottom: 0;
  }

  .Footer > p:nth-of-type(1) {
    font-size: 28px;
    color: #FD4C2E;
    margin-left: 32px;
    line-height: 100px;
  }

  .Footer > p:nth-of-type(2) {
    font-size: 28px;
    color: #FD4C2E;
    margin-left: 7px;
    line-height: 100px;
  }

  .Footer > a  {
    float: right;
    width: 288px;
    height: 100%;
    background: #FD4C2E;
    color: #FFFFFF;
    font-size: 28px;
    margin: 0 auto;
    text-align: center;
    border: none;
    margin-right:0px;
    line-height:100px;
    text-decoration: none;
  }

  .f {
    width: 100%;
    height: 100px;
    position: relative;
  }

  .Spnum {
    width: 50px;
    display: inline-block;
    text-align: center;
  }

  .Howm {
    font-size: 28px;
    color: #FD4C2E;
  }

  .Allm {
    width: 70px;
  }
</style>

